<template>
  <Scroll class="scroll" v-loading="!sliders.length && !albums.length">
    <div>
      <Slider :sliders="sliders" v-if="sliders.length"></Slider>
      <List :albums="albums" v-if="albums.length" @todetail="todetail"></List>
    </div>
  </Scroll>
  <RouterView v-slot="{ Component }">
    <Transition name="slider">
      <component :is="Component" :singer="singer"></component>
    </Transition>
  </RouterView>
</template>

<script>
import storage from 'good-storage'
import Slider from './components/slider'
import List from './components/list.vue'
import Scroll from '@/components/base/scroll/scroll.vue'
import { getRecommend } from '@/services/recommend'
export default {
  data () {
    return {
      sliders: [],
      albums: []
    }
  },
  components: {
    Scroll,
    Slider,
    List
  },
  async created () {
    const result = await getRecommend()
    this.sliders = result.sliders
    this.albums = result.albums
  },
  methods: {
    todetail (singer) {
      this.singer = singer
      storage.session.set('__singer__', singer)
      this.$router.push(`/recommend/${singer.id}`)
    }
  }
}
</script>

<style scoped lang="scss">
.scroll {
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
</style>
